<template>
    <div
        class="CancelCard"
        v-loading="pageLoading"
        element-loading-background="rgba(255, 255, 255, 0.7)"
    >
        <el-card class="box-card">
            <div slot="headerss" class="clearfix text_fl">
                <span>公共服务类-->销卡撤销</span>
                <el-button class="btn_close" type="text" @click="handleClose">关闭</el-button>
            </div>
            <div>
                <div v-show="!formDataInfo">
                    <el-form
                        ref="formData"
                        class="formData_form_inline"
                        label-position="right"
                        :model="formData"
                        label-width="150px"
                        size="small"
                        :inline="true"
                    >
                        <el-row>
                            <!-- <el-col :span="10" :offset="1">
                                <div class="text_center width30 dispy_in_bok">
                                    <el-form-item label="账户类别:" class="text_fl">
                                        <el-select
                                            v-model="formData.CATEGORY"
                                            placeholder="请选择账户类别"
                                            clearable
                                            @change="getCATEGORYObj"
                                        >
                                            <el-option
                                                v-for="item in AccountionTYPE_INFO"
                                                :label="item.label"
                                                :value="item.code"
                                                :key="item.code"
                                            ></el-option>
                                        </el-select>
                                    </el-form-item>
                                </div>
                            </el-col>
                            <el-col :span="12">
                                <div class="text_center width30 dispy_in_bok">
                                    <el-form-item label="卡号:" class="text_fl">
                                        <el-select
                                            v-model.trim="formData.CARDNO"
                                            placeholder="请选择卡号"
                                            clearable
                                            @change="getCARDNBRFun"
                                        >
                                            <el-option
                                                v-for="item in cardList_option"
                                                :label="item.CARDNBR"
                                                :value="item.CARDNBR"
                                                :key="item.CARDNBR"
                                            ></el-option>
                                        </el-select>
                                    </el-form-item>
                                </div>
                            </el-col>-->
                            <el-col :span="10" :offset="2">
                                <div class="width30">
                                    <el-form-item label="账户类型:" class="text_fl">
                                        <span class="el-form-item-span">{{CATEGORY_filter}}</span>
                                    </el-form-item>
                                </div>
                            </el-col>
                            <el-col :span="12">
                                <div class="width30">
                                    <el-form-item label="卡号:" class="text_fl">
                                        <span class="el-form-item-span">{{formData.CARDNO}}</span>
                                    </el-form-item>
                                </div>
                            </el-col>
                        </el-row>
                        <div class="cardY" v-if="false">
                            <div class="tab-header">
                                <div class="bodyTitlesLeft"></div>
                            </div>
                            <el-row>
                                <el-checkbox-group
                                    name="closecodeList"
                                    v-model="formData.closecode"
                                >
                                    <el-col
                                        :span="6"
                                        v-for="item in closecodeList"
                                        :key="item.label"
                                    >
                                        <el-checkbox
                                            :label="item.label"
                                            :key="item.code"
                                            @change="handelCheckboxClosecode($event,item.code)"
                                        ></el-checkbox>
                                    </el-col>
                                </el-checkbox-group>
                            </el-row>
                        </div>
                    </el-form>
                    <!-- 话术 -->
                    <div class="hstable_wrap" v-if="speechList.length!=0">
                        <el-table
                            :data="speechList"
                            border
                            stripe
                            header-row-class-name="headerRow"
                            ref="showListTable"
                            class="heard-bg business_table hstable"
                            @selection-change="handleSelectionChange"
                        >
                            <el-table-column type="selection" label=" " min-width="55"></el-table-column>
                            <el-table-column label="业务话术">
                                <template slot-scope="scope">{{scope.row.content}}</template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <div class="text_center content_top">
                        <el-button type="primary" size="small" @click="handerClickFormdata">销卡撤销</el-button>
                    </div>
                </div>
                <div v-if="formDataInfo">
                    <cancel-card-item :formDataInfo="formDataInfo" :pageTitle="销卡撤销"></cancel-card-item>
                </div>
                <el-dialog
                    v-drag
                    title="销卡撤销"
                    :visible.sync="centerDialogVisible"
                    width="500px"
                    :append-to-body="true"
                    top="30vh"
                    :close-on-click-modal="false"
                    center
                >
                    <p>
                        卡号：
                        <span>{{this.formData.CARDNO}}</span>
                    </p>
                    <p>
                        账户类型：
                        <span>{{this.CATEGORY_filter}}</span>
                    </p>
                    <p class="text_center padding_top15">
                        <span style="color:#3a8ee6; ">您确认要撤销销卡吗？</span>
                    </p>
                    <span slot="footer" class="dialog-footer">
                        <el-button
                            size="small"
                            icon="el-icon-circle-close"
                            @click="centerDialogVisible = false"
                        >取 消</el-button>
                        <el-button
                            type="primary"
                            size="small"
                            @click="handerCancelCard"
                            icon="el-icon-circle-check"
                            v-preventReClick
                        >确定</el-button>
                    </span>
                </el-dialog>
            </div>
        </el-card>
    </div>
</template>

<script>
import { mapGetters } from 'vuex';
import moment from 'moment';
import CancelCardItem from './childItem/CancelCardItem';
import {
    closePage,
    getDictMappingValue,
    itoStr,
    getDictSelectList,
    getDictSelectListOneValue,
    updateDeal3004,
    updateDeal3601,
} from '@/utils/Common';
// import { isEmptyObject, ChangePage, setNumber } from '@/utils/Object';

export default {
    name: 'CancelCardRevoke',
    data() {
        return {
            formData: {
                CATEGORY: '', // 账户类型
                isCATEGORY: '', // 显示的账户类型
                // CREDITLIMIT:'',//信用额度
                // AVLIMT:'',//可用额度
                // BALNCEFLG:'',//账户余额
                OPENDATE: '', // 开卡日期
                CARDSTAT: '', // 卡片状态
                CARDNO: '', // 卡号
                getCurrentDate: moment().format('YYYY-MM-DD'),
                getCurrentDateTime: moment().format('h:mm:ss'),
                CANCODE: 'T', // 挂失代码
                OPTION: '000000000000000',
                LOSTTYPE: 'PHN',
                PRODUCT: '',//产品号
            },
            CARDSTAT_label: '',//卡片状态
            cancelCard: '1', // 销卡单选
            formDataInfo: '', // 销卡返回回来的数据
            centerDialogVisible: false,
            PRODUCT_value: '',
            pageLoading: true,
            DictClocd_option: '', // 字典查到的数据 //CLOCD 卡状态字段值 多个
            RTNIND_value: '', // 翻页标志
            BALANCE_value: '0',//取芯片卡可用余额 电子现金余额
            CATEGORY_filter: '',//账户类型 lable
            cardList_option: '',//当前账户下的所有的卡
            speechList: [],//话术列表
            selectedList: [],
            precardstat: '',
            MenuId: '',
        };
    },
    components: { CancelCardItem },
    computed: {
        ...mapGetters([
            'defaultParams',
            'cardInfo_3004',
            'AccountionTYPE_INFO',
            'cardList_3601', //
            'pinFlag',
            'currentSessionObj',
            'isCurrentMenuInfo',
            'checAllData',
        ]),
    },
    filters: {
        isDateVal: (value) => {
            value = (`${value}`).trim();
            if (value) {
                return moment(value, 'YYYYMMDD').format('YYYY-MM-DD');
            }
            return '';
        },
        isTimeVal: (value) => {
            value = (`${value}`).trim();
            value = value.substring(0, 6);
            if (value) {
                return moment(value, 'hhmmss').format('HH:mm:ss');
            }
            return '';
        },
        filterExpire: (value) => {
            value = (`${value}`).trim();
            if (value) {
                return moment(value, 'YYMM').format('YY-MM');
            }
            return '';
        },
        filterCANCLCODE: (value, DictClocd_option) => {
            value = (`${value}`).trim();
            if (value === '') return '正常';
            for (let index = 0; index < DictClocd_option.length; index++) {
                const element = DictClocd_option[index];
                if (element.code === value) {
                    return element.label;
                }
            }
        },
    },
    created() {
        this.formData.OPENDATE = this.cardInfo_3004.OPENDATE || '';// 开卡日期
        this.formData.CARDSTAT = (this.cardInfo_3004.CARDSTAT + '').trim() || '';// 卡片状态
        this.precardstat = this.cardInfo_3004.CARDSTAT.trim() === '' ? '空' : this.cardInfo_3004.CARDSTAT.trim();
        this.formData.CARDNO = this.cardInfo_3004.CARDNO || '';// 卡号
        this.formData.CATEGORY = (this.cardInfo_3004.CATEGORY + '').trim() || '';//账户类别
    },
    async mounted() {
        this.MenuId = this.$route.params.id || '';
        // this.getCardAccount3001();
        await this.getconfigDict();
        this.getExecuteFun();
        await this.getspeechList();
    },
    methods: {
        //页面进入限制条件
        getExecuteFun() {
            console.log('this.formData.CARDSTAT', this.formData.CARDSTAT);

            let value = this.formData.CARDSTAT.trim();
            //if (value === '') return '正常';
            for (let index = 0; index < this.DictClocd_option.length; index++) {
                const element = this.DictClocd_option[index];
                if (element.code === value) {
                    this.CARDSTAT_label = element.label;
                }

            }
            if (value === '') { this.CARDSTAT_label = '正常'; }
            if (this.formData.CARDSTAT !== 'T') {
                this.$alert(
                    `此卡状态为:${this.CARDSTAT_label},不可以进行销卡撤销操作！`,
                    '销卡撤销',
                    { customClass: 'warning', type: 'warning', showClose: false },
                ).then(() => {
                    closePage(this.$route, this, 1);
                });
            }
        },
        async getconfigDict() {
            this.formData.PRODUCT = (this.cardInfo_3004.PRODUCT + '').trim();
            // XH_REASON
            this.DictClocd_option = await getDictSelectList('CLOCD', this);

            // this.CATEGORY_option = await getDictSelectList('CATE', this);
            this.CATEGORY_filter = await getDictMappingValue('CATE', this.cardInfo_3004.CATEGORY, this);
            this.PRODUCT_value = await getDictMappingValue('PRODUCT', this.cardInfo_3004.PRODUCT, this);
            this.CARDSTAT_label = await getDictMappingValue('CLOCD', this.formData.CARDSTAT, this);

            // 获取 销卡原因 选项 
            // this.closecodeList = await this.getDictDetails('CLOSECODE');
            this.getCardListOption(this.formData.CATEGORY);
            this.pageLoading = false;

        },
        ////////////////////////////////////////////////////////////////
        //根据菜单id查询话术列表
        async getspeechList() {
            console.log("this.isCurrentMenuInfo.id", this.isCurrentMenuInfo.id);
            console.log("this.MenuId", this.MenuId);
            var checkParam = {
                'id': this.MenuId || this.isCurrentMenuInfo.id,
            };
            this.$post.busiMenu.getlistByMenuId(checkParam).then((res) => {
                console.log("话术查询结果：", res);
                if (res.status === 200) { // http通讯成功
                    if (res.data.status == 0) { // 业务请求成功
                        this.speechList = res.data.content;
                    }
                }
            });
        },
        handleSelectionChange(val) {
            this.selectedList = val;
        },
        //获取当前账户类型下 所有的卡 
        getCardListOption(CATEGORY_val) {
            this.cardList_option = this.cardList_3601.filter((item) => (item.CATEGORY + '').trim() === CATEGORY_val);
            console.log(" this.cardList_option ", this.cardList_option);
        },
        ///////////////////////////////////////////////////////////////
        // 查字典 特殊字段
        // async getDictSpecialValue(taget) {
        //     const params = {
        //         cfgNo: taget,
        //         bankNum: this.defaultParams.body.appHead.bnknbr,
        //         sect: '0000',
        //     };
        //     let value;
        //     await this.$post.dictDetail.queryConfig(params).then((res) => {
        //         // console.log(res,'9031')
        //         if (res.status === 200) {
        //             value = res.data.content.cfgEdit;
        //         }
        //     });
        //     return value;
        // },
        // 查字典
        async getDictDetails(val) {
            let params = {};
            let accountName;
            params = {
                dictValue: val,
                pageNum: 1,
                pageSize: 1000,
            };
            await this.$post.common.getBaseDataList(params).then((res) => {
                console.log(res, 'res');
                if (res.status === 200) {
                    accountName = res.data.content;
                } else {
                    this.$message.error(res.data.msg);
                }
            });
            return accountName;
        },

        // isfilterDateVal(value) {
        //     value = (`${value}`).trim();
        //     if (value === '0') return ''
        //     if (value) {
        //         return moment(value, 'YYYYMMDD').format('YYYY-MM-DD');
        //     }
        //     return '';
        // },
        // BALANCE_value
        handerClickFormdata() {
            console.log("this.selectedList.length", this.selectedList.length);
            if (this.selectedList.length != this.speechList.length) {
                this.$alert('话术尚未全部勾选！', '提示', {
                    customClass: 'warning', type: 'warning',
                });
                return;
            }
            this.centerDialogVisible = true;
        },

        // 提交做4018交易 销卡交易
        async handerCancelCard() {
            const defaultParam = JSON.parse(JSON.stringify(this.defaultParams));
            defaultParam.body.appHead.tranCode = '4018';// 修改交易号
            defaultParam.body.appBody = {
                PINFLAG: this.pinFlag,
                PIN: '',
                CARDNO: this.formData.CARDNO, // 卡号
                CARDNBR: this.formData.CARDNO, // 卡号
                CANCODE: '',//this.formData.CANCODE,// 挂失代码
                LOSTTYPE: this.formData.LOSTTYPE,// LOSTTYPE 挂失方式  LTR信函挂失 PHN电话挂失  VTB到分行挂失 VTC到信用卡中心挂失
                OPTION: this.formData.OPTION,
            }
            await this.$post.common.transPort(defaultParam).then((res) => {
                if (res.status === 200) { // 请求成功
                    const cardlossofs = JSON.parse(res.data.jsonRes);
                    console.log(cardlossofs, '4018_卡资料信息');
                    if (cardlossofs.sysHead.rspCd == '000000') { // 交易成功
                        this.formDataInfo = cardlossofs.body.appBody;
                        if (this.formData.CARDNO === this.cardInfo_3004.CARDNO) {
                            updateDeal3004(this.cardInfo_3004.CARDNO, this);
                            this.updateCheckData(this.precardstat, cardlossofs.body.appBody.STS);
                        }
                        updateDeal3601(this.cardInfo_3004.CARDNO, this.cardInfo_3004.KEYTYPE, this.cardInfo_3004.CUSTID, this);

                        // const successMessage = `卡号：${this.formDataInfo.CARDNBR} 销卡成功！`;
                        // const ts = `${cardlossofs.sysHead.busiName}提示`;
                        // this.$alert(successMessage, ts, {
                        //     customClass: 'success', type: 'success',
                        //     callback: (action) => {
                        //         this.handleClose();
                        //     },
                        // });
                        this.formDataInfo.getCurrentDateTime = this.formData.getCurrentDateTime;
                    } else {
                        const ErrorMessage = `错误码：${cardlossofs.sysHead.rspCd} ` + `错误信息：${cardlossofs.sysHead.rspMsg}`;
                        this.$alert(ErrorMessage, cardlossofs.sysHead.busiName, '提示', {
                            customClass: 'error', type: 'error',
                        });
                    }
                    this.centerDialogVisible = false;// 关闭 提示框

                }
            });
        },

        updateCheckData(precardstat, nowcardstat) {
            const checAllDataItem = JSON.parse(JSON.stringify(this.checAllData));
            precardstat = precardstat.trim() === '' ? '空' : precardstat.trim();
            nowcardstat = nowcardstat.trim() === '' ? '空' : nowcardstat.trim();
            checAllDataItem[precardstat].falg = false;
            checAllDataItem[nowcardstat].falg = true;
            // 修改验证开关 结束后再 保存一下 checAllDataItem
            this.$store.commit('common/SAVE_CHECK_DATA', checAllDataItem);
        },

        //
        handelNotSearch() {
            this.$router.push({
                path: '/businessSystem/unBillChecked',
            });
        },
        handelHasSearch() {
            this.$router.push({
                path: '/businessSystem/billChecked',
            });
        },
        handelByStages() {
            this.$router.push({
                path: '/businessSystem/mptransqry',
            });
        },
        // 点击关闭
        handleClose() {
            closePage(this.$route, this, 1);
        },

    },
};
</script>

<style lang='scss' >
.CancelCard {
    .cardY {
        margin-top: 20px;
    }
    .footer {
        margin: 10px 0 10px 0;
    }

    .el-checkbox {
        margin: 8px 0;
        .el-checkbox__label {
            font-size: 14px;
            /* color: #606266; */
            // font-weight: 700;
        }
    }
    .text_center {
        text-align: center;
    }

    .btn_item {
        float: left;
        width: 100%;
        margin: 20px 0;
    }

    .el-card__header {
        padding: 8px !important;
    }

    .backgroundRow {
        margin-top: 20px;
        padding: 10px 5px;
        background-color: #ecf5ff;
    }
    .el-form-item__content {
        line-height: 0;
    }
    .el-card.is-always-shadow {
        -webkit-box-shadow: none;
        box-shadow: none;
    }
    .el-card {
        border: none;
    }
    .tab-header {
        text-align: center;
    }
}
</style>
